<template>
  <div class="toolbar">
    <div class="cancel" @touchend="cancel"></div>
    <div class="delete" @touchend="deletes"></div>
    <div class="submit" @touchend="submit"></div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
export default {
  computed: {
    ...mapGetters("produceStatus", {
      produce: "getProduce",
      current: "getProduceCurrent",
      actionElement: "getActionElement"
    })
  },
  methods: {
    //取消 恢复到元素初始值 关闭工具栏
    cancel: function () {
      this.clickMusic()
      if (this.actionElement.produceEryId) {
        const imageryList = this.produce.content[this.current].imagery
        for (let i = 0, len = imageryList.length; i < len; i++) {
          if (imageryList[i].produceEryId === this.actionElement.produceEryId) {
            this.$set(imageryList, i, this.actionElement)
            this.setActionElement({})
            return
          }
        }
      }
      if (this.actionElement.produceRoleId) {
        const roleList = this.produce.content[this.current].role
        for (let i = 0, len = roleList.length; i < len; i++) {
          if (roleList[i].produceRoleId === this.actionElement.produceRoleId) {
            this.$set(roleList, i, this.actionElement)
            this.setActionElement({})
            return
          }
        }
      }
    },
    //删除元素 关闭工具栏
    deletes: function () {
      this.clickMusic()
      if (this.actionElement.produceEryId) {
        const imagery = {
          type: "imagery",
          icon: this.actionElement.icon,
          content: this.actionElement
        }
        this.deleteProduceImagery(this.actionElement.produceEryId)
        this.insertPack(imagery)
      }
      if (this.actionElement.produceRoleId) {
        const role = {
          type: "role",
          icon: this.actionElement.imageUrl,
          content: this.actionElement
        }
        this.deleteProduceRole(this.actionElement.produceRoleId)
        this.insertPack(role)
      }
      this.setActionElement({})
    },
    //保存 关闭工具栏
    submit: function () {
      this.clickMusic()
      this.setActionElement({})
    },
    ...mapActions("packStatus", ["insertPack"]),
    ...mapActions("produceStatus", ["setActionElement", "deleteProduceImagery", "deleteProduceRole"])
  }
}
</script>

<style lang="stylus" scoped>
$button()
  width 9vh
  height 9vh
  float left
  margin 1.5vh 1.5vh
.toolbar
  background rgba(255, 255, 255, 0.9)
  $coord('WHLB', 38vh, 12vh, 50%, 10vh)
  margin-left -19vh
  border-radius 9vh
  z-index 101
  box-sizing border-box
  padding-left 1.2vh
  .cancel
    $button()
    background url($urlTitle + 'icon/操作区域-取消.png') 0 0 / 100% 100%
  .delete
    $button()
    background url($urlTitle + 'icon/操作区域-删除.png') 0 0 / 100% 100%
  .submit
    $button()
    background url($urlTitle + 'icon/操作区域-确定.png') 0 0 / 100% 100%
</style>